<template>
    <div>
        <el-card style="margin: 10px 0;">
            <CategorySelect @getCategoryId="getCategoryId" :show="scene!==0"></CategorySelect>
        </el-card>
        <el-card>
            <div v-show="scene==0">
                <!-- 展示spu结构 -->
                <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addspu">添加SPU</el-button>
                <el-table style="width: 100%;" border :data="records">
                    <el-table-column label="序号" type="index" align="center" width="60px">

                    </el-table-column>
                    <el-table-column prop="spuName" label="spu名称" width="width">

                    </el-table-column>
                    <el-table-column prop="description" label="spu描述" width="width">

                    </el-table-column>
                    <el-table-column prop="prop" label="操作" width="width">
                        <template slot-scope="{row,$index}">
                            <!-- 添加SKU按钮 -->
                            <hint-button type="success" icon="el-icon-plus" title="添加spu" size="mini"
                                @click="addSku(row)">
                            </hint-button>
                            <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改spu"
                                @click="update(row)">
                            </hint-button>
                            <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前spu全部sku列表"
                                @click="handler(row)">
                            </hint-button>
                            <!-- 删除SPU -->
                            <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="deleteSpu(row)">
                                <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除spu"
                                    slot="reference">
                                </hint-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[3, 5, 10, 100]"
                    layout=" prev, pager, next, jumper,->,sizes,total" :page-size="limit" :total="total"
                    style="text-align: center;margin-top: 10px;">
                </el-pagination>
            </div>
            <SpuForm v-show="scene==1" @changeScene="changeScene" ref="spu"></SpuForm>
            <SkuForm v-show="scene==2" ref="sku" @changeScenes="changeScenes"></SkuForm>

        </el-card>
        <!-- 查看的对话框 -->
        <el-dialog :title="`${spu.spuName}的列表`" :visible.sync="dialogTableVisible" :before-close="close">
            <el-table :data="skuList" style="width: 100%;" v-loading="loading">
                <el-table-column prop="skuName" label="名称" width="150"></el-table-column>
                <el-table-column prop="price" label="价格" width="200"></el-table-column>
                <el-table-column prop="weight" label="重量"></el-table-column>
                <el-table-column label="默认图片">
                    <template slot-scope="{row,$index}">
                        <img :src="row.skuDefaultImg" alt="NoImage" style="width: 80px; height: 80px;">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>

</template>
<script>
    import SpuForm from './SpuForm'
    import SkuForm from './SkuForm'
    export default {
        name: 'Spu',
        components: {
            SpuForm, SkuForm
        },
        data() {
            return {
                category1Id: '',
                category2Id: '',
                category3Id: '',

                page: 1,
                limit: 3,
                records: [],
                total: 0,
                scene: 0,
                //控制对话框的显示与隐藏
                dialogTableVisible: false,
                spu: {},
                skuList: []
            }
        },

        methods: {
            // 获取SPU数据列表
            async getSpuList() {
                const { page, limit, category3Id } = this
                let res = await this.$API.spu.reqSpuList(page, limit, category3Id)
                if (res.code == 200) {
                    this.total = res.data.total
                    this.records = res.data.records
                }
            },
            // 三级联动的自定义事件
            getCategoryId({ categoryId, level }) {
                if (level == 1) {
                    this.category1Id = categoryId;
                    this.category2Id = '';
                    this.category3Id = ''
                } else if (level == 2) {
                    this.category2Id = categoryId;
                    this.category3Id = ''
                } else {
                    this.category3Id = categoryId;
                    this.getSpuList()
                }
            },
            // 点击分页器的回调
            handleSizeChange(limit) {
                this.limit = limit
                this.getSpuList()
            },
            handleCurrentChange(page) {
                this.page = page
                this.getSpuList()
            },
            addspu() {
                this.scene = 1
                this.$refs.spu.addspuDate(this.category3Id)
            },
            // 点击修改spu
            update(row) {
                this.scene = 1
                this.$refs.spu.initSpuData(row)
            },
            // 自定义事件回调SPUform
            changeScene({ scene, flag }) {
                this.scene = scene

                if (flag == "添加") {
                    this.getSpuList(this.page = 1)
                } else {
                    this.getSpuList(this.page)
                }

            },
            // 删除SPU按钮的回调
            async deleteSpu(row) {
                let res = await this.$API.spu.reqDeleteSpu(row.id)
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getSpuList(this.records.length > 1 ? this.page : this.page - 1)
                }
            },
            //添加SKU的按钮回调
            addSku(row) {
                this.scene = 2
                this.$refs.sku.getData(this.category1Id, this.category2Id, row)
            },
            //sku通知父组件修改场景
            changeScenes(scene) {
                this.scene = scene

            },
            //查看SKU按钮的回调
            async handler(row) {
                this.dialogTableVisible = true
                this.spu = row
                //获取SKU数据展示
                let res = await this.$API.sku.reqSkuList(row.id)
                if (res.code == 200) {
                    this.skuList = res.data
                    this.loading = false
                }
            },
            loading() {

            },
            close(done) {
                this.loading = true
                this.skuList = []
                done()
            }
        },
    }
</script>
<style lang="">

</style>